<template>
    <div class="news">
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/news/bg.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">News</div>
                    <div class="title2">Resta sempre aggiornato</div>
                </div>
            </div>
        </div>

        <!-- 新闻卡片 -->
        <div class="main f-col f-cen">
            <div class="main-title c">Approfondimenti e pubblicazioni scientifiche</div>
            <div class="main-item f" v-for="(item, index) in newsList" :key="index">
                <div class="imgbox">
                    <img :src="item.imgUrl" alt />
                    <div class="date f-col">
                        <div class="c">{{ item.date[1] }}</div>
                        <div class="block"></div>
                        <div class="c" style="font-size: 20px;">{{ item.date[2] }}</div>
                        <div class="block"></div>

                        <div class="c">{{ item.date[0] }}</div>
                    </div>
                </div>
                <div class="textbox">
                    <a href="#">
                        <div class="title">{{ item.title }}</div>
                    </a>
                    <div class="text">{{ item.text }}</div>
                    <div class="btn">READ MORE</div>
                </div>
            </div>
            <el-pagination
                layout=" pager, next"
                :total="newsLists.length"
                @current-change="handleCurrentChange"
                :page-size="page"
            />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

let newsLists = [{
    imgUrl: 'src/assets/images/news/img1.jpg',
    title: 'Hi-Comby, Goodbye smagliature!',
    text: 'Sono tantissimi gli interventi che possono essere eseguiti per combattere l’inestetismo della cellulite,alcuni mirano a “mascherare” il problema stimolando la produzione di melanina, agendo,così,sulla ripigmentazione dellasmagliatura.…',
    date: ['2021', 'dec', '22']
}, {
    imgUrl: 'src/assets/images/news/img2.jpg',
    title: '“Trauma sportivo” equivale a “fine carriera”? No. Ecco perché.',
    text: 'Il trauma sportivo per i professionisti equivale davvero a fine carriera? Grazie alla Terapia Enerpulse® no. Sebbene i traumi sportivi possano avere un grande impatto nella vita di tutti,  chi…',
    date: ['2021', 'set', '24']
}, {
    imgUrl: 'src/assets/images/news/img3.jpg',
    title: 'La biorisonanza come prevenzione per gli attacchi di panico.',
    text: 'Nero. Tutto appare nero e vuoto, il respiro è sempre più corto e all’improvviso ci si rende conto di essere rinchiusi del labirinto della nostra mente. Disperatamente si cercano soluzioni…',
    date: ['2021', 'set', '23']
}, {
    imgUrl: 'src/assets/images/news/img4.jpg',
    title: 'La biorisonanza come prevenzione per gli attacchi di panico.',
    text: 'Nero. Tutto appare nero e vuoto, il respiro è sempre più corto e all’improvviso ci si rende conto di essere rinchiusi del labirinto della nostra mente. Disperatamente si cercano soluzioni…',
    date: ['2021', 'lug', '27']
}, {
    imgUrl: 'src/assets/images/news/bg5.png',
    title: 'ALLERGIE E INTOLLERANZE: LA BIORISONANZA A SUPPORTO DELLA DIAGNOSI',
    text: 'Nonostante negli ultimi anni sia aumentata l’incidenza di patologie legate all’assunzione di svariati alimenti, c’è ancora molta confusione tra allergie e intolleranze che, sebbene rappresentino entrambe una risposta del sistema immunitario, sono fenomeni completamente distinti. L’allergia è…',
    date: ['2021', 'apr', '7']
}, {
    imgUrl: 'src/assets/images/news/bg6.png',
    title: 'RITMO CARDIACO E VARIABILITÀ: LA MEDITAZIONE CHE FA BENE AL CUORE',
    text: 'HRV e HRA. Misure dell’andamento cardiaco Nell’era della digitalizzazione, si susseguono continue innovazioni in campo biomedico al fine di misurare in poco tempo segnali biologici a distanza, anche attraverso uno…',
    date: ['2021', 'apr', '2']
}]
// 显示的条目数
let page = 4
var newsList = ref(newsLists.slice(0, page))
const handleCurrentChange = (currentPageNum) => {
    // 如果能够打印出来相应的页码，就证明获取成功了。
    newsList.value = newsLists.slice(currentPageNum * page - page, currentPageNum * page)
    window.scrollTo(0, 0);
}
</script>

<style lang="less" scoped>
.main {
    max-width: @box-width;
    margin: 0 auto;
    padding: 50px;
    &-title {
        width: 66%;
        font-weight: 600;
        font-size: 42px;
        color: @text-title;
    }
    &-item {
        width: 66%;
        height: 100%;
        margin: 25px;
        align-items: center;
        .imgbox {
            width: 75%;
            overflow: hidden;
            position: relative;
            img {
                height: 100%;
                width: 100%;
                transition: 1.2s;
            }
            img:hover {
                transform: scale(1.1);
            }
            .date {
                position: absolute;
                top: 0;
                left: 0;
                padding: 5px;
                background-color: @bg2;
                margin: 10px;
                color: @text;
                font-weight: 600;
                font-size: 12px;
                .block {
                    height: 2px;
                    background-color: @bg1;
                    width: 50%;
                    align-self: center;
                    margin: 4px;
                }
            }
        }
        .textbox {
            margin-left: -115px;
            margin-right: -115px;
            max-width: 320px;
            background-color: @bg4;
            padding: 30px;
            z-index: 999;
            .title {
                color: @text-title;
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 5px;
                transition: 0.6s;

                &:hover {
                    color: @text-bg;
                }
            }
            .text {
                font-size: 14px;
                text-align: justify;
                color: @text-main;
                margin-bottom: 15px;
                word-break: break-all;
            }
            .btn {
                float: left;
                font-weight: 200;
                font-size: 14px;
                color: @text;
                background-color: @bg2;
                padding: 8px 12px;
            }
        }
    }
    &-item:nth-child(2n-1) {
        flex-direction: row-reverse;

        .date {
            left: unset;
            right: 0;
        }
    }
    &:deep(.el-pager) {
        font-weight: 600;
    }
    &:deep(.is-active) {
        color: @text-bg;
        border-bottom: 2px solid @text-bg;
    }
    &:deep(li) {
        margin: 5px;
        &:hover {
            color: @text-bg;
            border-bottom: 2px solid @text-bg;
        }
    }
}
</style>